<template>
  <main>

    <div class="form-body">
  <div class="form-title">{{ $t('zzd_create.title') }}</div>
  
      <div class="form-main">
        <div class="form-item">
          <div class="form-item-label">{{ $t('zzd_create.Creater') }}</div>
          <div class="form-item-input">
            <el-input v-model="zzd_form.Creater" :placeholder="$t('zzd_create.Creater')" />
          </div>
        </div>
        <div class="form-item">
          <div class="form-item-label">{{ $t('zzd_create.CrDate') }}</div>
          <div class="form-item-input">
            <el-date-picker style="width: 100%;" v-model="zzd_form.CrDate" type="date" value-format="yyyy-MM-dd"
              :placeholder="$t('zzd_create.CrDate')" />
          </div>
        </div>
        <div class="form-item">
          <div class="form-item-label">{{ $t('zzd_create.BuDate') }}</div>
          <div class="form-item-input">
            <el-date-picker style="width: 100%;" v-model="zzd_form.BuDate" type="date" value-format="yyyy-MM-dd"
              :placeholder="$t('zzd_create.BuDate')" />
          </div>
        </div>
        <div class="form-item">
          <div class="form-item-label">{{ $t('zzd_create.BuType') }}</div>
          <div class="form-item-input">
            <el-select v-model="zzd_form.BuType" :placeholder="$t('zzd_create.BuType')">
              <el-option label="Income" value="Income" />
              <el-option label="Expense" value="Expense" />
            </el-select>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item-label">{{ $t('zzd_create.Abstract') }}</div>
          <div class="form-item-input">
            <el-input v-model="zzd_form.Abstract" :placeholder="$t('zzd_create.Abstract')" />
          </div>
        </div>
        <div class="form-item">
          <div class="form-item-label">{{ $t('zzd_create.Currency') }}</div>
          <div class="form-item-input">
            <el-select v-model="zzd_form.Currency" :placeholder="$t('zzd_create.Currency')">
              <el-option label="CNY" value="CNY" />
              <el-option label="USD" value="USD" />
            </el-select>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item-label">{{ $t('zzd_create.SerialNo') }}</div>
          <div class="form-item-input">
            <el-input v-model="zzd_form.SerialNo" :placeholder="$t('zzd_create.SerialNo')" />
          </div>
        </div>
      </div>
      <div class="form-detail">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column fixed prop="date" label="日期" width="150">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="province" label="省份" width="120">
          </el-table-column>
          <el-table-column prop="city" label="市区" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="邮编" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>
    </div>
  </main>
</template>
<script>
export default {
  data() {
    return {
      zzd_form: {
        Creater: '',
        CrDate: '',
        BuDate: '',
        BuType: '',
        Abstract: '',
        Currency: '',
        SerialNo: ''
      }
    }
  }
}
</script>
<style scoped>
main {
  /* padding: 20px; */
  width: 1500px;
  background-color: #f5f5f5;
  /* text-align: center; */
  height: auto;
}

.form-title {
padding-top: 20px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  width: 300px;
  height: 60px;
  /* text-align: center; */
  margin: 0 auto;
}


.form-main {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  /* padding: 20px; */
  width: 80%;
  margin: 0 auto;
}

.form-item {
  margin-bottom: 10px;
  /* margin-right: 20px; */
  width: 250px;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  /* display: block; */
}

.form-item-label {
  /* word-break: break-all; */
  font-size: 10px;
  font-weight: bold;
  color: #333;
  width: 35%;

  white-space: pre-wrap;
  overflow-wrap: break-word;
  padding: 15px;
  /* overflow-wrap: anywhere; */
  /* max-width: 30%; */
}

.form-item-input {

  overflow-wrap: break-word;
  /* overflow: auto; */
  font-size: 16px;
  color: #333;
  width: 65%;
  /* max-width: 70%; */
}

.form-item-input input {
  margin: 0 auto;
  overflow-wrap: break-word;

}
</style>